﻿
@{
               
}
@using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right", style = "display:none" }))
{
    @Html.AntiForgeryToken()
}
<ul class="nav nav-user pull-right">
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            <span class="icon-cog"></span>
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li>
                <span>
                    <span class="icon-user"></span>
                    <span id="usergroup">-group</span>
                </span>
            </li>
            <li class="divider"></li>
            <li class="">
                <a href="@Url.Action("Manage","Account")">Quản lý tài khoản</a>
            </li>
            <li class="divider"></li>
            <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
        </ul>
    </li>
</ul>
<span class="brand visible-desktop visible-tablet" href="#">
    <label id="usernamep">@User.Identity.Name</label>
</span>



<style>
    .iconpo
    {
        margin-right:10px;
    }
        .iconpo ul li {
            float: left;
            width: 30px;
            display: block;
            margin-right: 12px;
            position: relative;
        }
            .iconpo ul li a span {
                position: absolute;
                margin-top: -2px;
                color: #fff;
                font-weight: bold;
                font-size: 14px;
                padding: 2px  5px 8px  5px;
                height: 10px;
                width: 10px;
                text-align: center;
                background: #ff0000;
                border-radius: 10px;
            }

        .iconpo ul li a
        {
            color:#fff;
            font-size:11px;
            position:relative;
        }
            .iconpo ul li.active a
            {
                background:#fff;
                color:rgb(0, 0, 0);
            }
            .iconpo ul li.active .iconpo-sub
            {
               display:block;
            }
             .iconpo ul li .iconpo-sub {
                display: none;
                position: absolute;
                width: 180px;
                padding: 5px 10px;
                height: 150px;
                background: #fff;
                color: #000;
                border-radius: 2px;
                border: 1px solid #ccc;
            }
            .iconpo ul li.active .iconpo-sub {
                display: block;
                /* overflow: scroll; */
                overflow-x: hidden;
            }
</style>

<script>
    $(document).ready(function () {
        $(".iconpo li").blur(function () {
            thisvar = $(this);
            thisvar.removeClass("active");
            alert(2);
        });
        $(".statusbtn").toggle(function (event) {
                event.preventDefault();
                var parent = $(this).parent();
                $(".iconpo li").removeClass("active");
            
                    parent.addClass("active");
               
        }, function (event) {
            event.preventDefault();
            $(".iconpo li").removeClass("active");
           
        });
        
    });
</script>

